<template>
    <uni-popup title="可选服务时段" ref="timerange" type="bottom" background-color="white">
        <view class="timerange-dialog">
            <view class="title">
                可服务时间段
                <uni-icons @click="close" class="close" type="close" color="gray" size="24" />
            </view>
            <!-- <view class="checkbox-group">
                <view @click="changeCheck(item,index)" :style="{
                    'background': item.check==true?'#FF8A9B':'','color': item.check==true?'#FFF':''
                }" class="checkbox" v-for="(item, index) in list" :key="index">
                    {{ item.start_time }}-{{item.end_time}}
                </view>
            </view> -->
			<view class="checkbox-group">
				<view @click="changeCheck(index)" :class="{
			                    select: item.check
			                }" class="checkbox" v-for="(item, index) in data_list">
					{{ item.start_time }}-{{item.end_time}}
				</view>
			</view>
			<view style="height: 120rpx;"></view>
            <view class="confirm-button">
                <view @click="handletime()">确定</view>
            </view>
        </view>
    </uni-popup>
</template>
<script>
export default {
	props:{
		list:{
			type:Array,
			default:[]
		}
	},
    data() {
        return {
			actindex:null,
			data_list:[]
            // list: [
            //     { label: '8:00-12:00', value: 1, check: false },
            //     { label: '13:30-16:00', value: 2, check: false },
            //     { label: '16:00-19:00', value: 3, check: false },
            //     { label: '19:00-20:00', value: 4, check: false },
            //     { label: '20:30-22:00', value: 5, check: false },
            // ]
        }
    },
	watch: {
		list() {
			this.data_list = this.list
			this.data_list.forEach(item => {
				item.check = false
			})
		}
	},
    methods: {
        changeCheck(index) {
           this.data_list[index].check = !this.data_list[index].check
           this.data_list = [...[], ...this.data_list]
        },
		handletime(){
			const c = this.data_list.every(item => item.check==false)
			if(c==false){
				this.$emit('handletime',this.data_list)
				this.close()
			}else{
				uni.showToast({
					title:'请选择标签',
					icon:'none'
				})
			}
		},
        open() {
			// this.list.forEach(item=>{
			// 	item.check=false
			// })
            console.log('open')
            this.$refs.timerange.open()
        },
        close() {
            this.$refs.timerange.close()
        }
    }
}
</script>
<style lang="scss">
.timerange-dialog {
    padding-bottom: env(safe-area-inset-bottom);

    .title {
        position: relative;
        display: flex;
        justify-content: center;
        padding: 30rpx;
        font-size: 40rpx;
        border-bottom: 1px solid #e5e5e5;
    }

    .close {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
    }

    .checkbox-group {
        display: flex;
        flex-wrap: wrap;
        padding: 30rpx;
        gap: 24rpx;

        .checkbox {
            width: calc(33.33% - 18rpx);
            padding: 20rpx 0;
            text-align: center;
            border-bottom: 1px solid #e5e5e5;
            background: #FFF6F8;
            border-radius: 38rpx 38rpx 38rpx 38rpx;
        }

        .select {
            background: #FF8A9B;
            color: #FFFFFF;
        }
    }
}
</style>